<template>
  <div class="main">
    <div class="header-box">
      <CustomHeader></CustomHeader>
    </div>
    <div class="content">
      <div class="box">
        <nuxt />
      </div>
    </div>
    <!-- <GlobalLoader :critical="true" :loadings="showLoading" /> -->
  </div>
</template>
<script>
  export default {
    name: 'CustomTemp',
    data() {
      return {
        // showLoading: true // 控制全局加载状态
      }
    },
    created() {
      if (!process.client) return
      // 初始化数据
      this.initializeData()
    },
    methods: {
      // 处理文档加载状态

      // 初始化所有需要的数据
      async initializeData() {
        const initActions = [
          ['initData/getInitData', '初始化基础数据'],
          ['initData/getInitData2', '获取多语言数据'],
          ['initData/getCategoryData', '获取分类数据'],
          ['initData/getFooterData', '获取页脚数据']
        ]
        try {
          await Promise.all(initActions.map(([action]) => this.$store.dispatch(action)))
          this.$nuxt.$loading.finish()
        } catch (error) {
          console.error('数据初始化失败:', error)
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .main {
    // 响应式布局变量
    --desktop-width: 1200px;
    --tablet-width: 768px;
    --mobile-width: 375px;
    .header-box {
      display: none;
    }
    .content {
      .box {
        // width: var(--desktop-width);
        margin: 0 auto;
        max-width: 100%;
        // padding: 0 15px;
        box-sizing: border-box;
      }
    }
  }
  // 平板布局
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .main {
      .content {
        .box {
          // width: var(--tablet-width);
        }
      }
    }
  }
  // 移动端布局
  @media screen and (max-width: 767px) {
    .main {
      .header-box {
        display: block;
      }
      .content {
        .box {
          // width: var(--mobile-width);
        }
      }
    }
  }
</style>
